 <template>
	<div class="container">
		<el-page-header @back="$router.go(-1)" content="">
		</el-page-header>
		<div class="header">库存历史
		<div class="search">
			<div class="left"><el-input v-model="input" placeholder="请输入内容"></el-input></div>
			<div class="right"><el-button @click="searchclick" type="primary" icon="el-icon-search" >搜索</el-button></div>
		</div>
		<div class="orderby">
			<el-select v-model="value" placeholder="默认排序" @change = "orderfoods">
				<el-option value="默认排序">
				</el-option>
			    <el-option value="食材新鲜度">
			    </el-option>
				<el-option value="单价">
				</el-option>
				<el-option value="入柜时间">
				</el-option>
			  </el-select>
		</div>
		</div>
		<div class="main">
    <el-table
      :data="tableData"
      style="width: 100%"
	  stripe
	  row-class-name="all-row">
      <el-table-column
        prop="foodname"
        label="食材">
      </el-table-column>
      <el-table-column
        prop="Inumber"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="AllPrice"
        label="总价">
      </el-table-column>
	  <el-table-column
	    prop="Price"
	    label="单价">
	  </el-table-column>
	  <el-table-column
	    prop="Addtime"
	    label="入柜时间">
	  </el-table-column>
	  <el-table-column
	    prop="Createtime"
	    label="生产日期">
	  </el-table-column>
	  <el-table-column
	    prop="Qgp"
	    label="保质期">
	  </el-table-column>
	  <el-table-column
	    prop="Expirationtime"
	    label="保质期">
	  </el-table-column>
	  <el-table-column
	    label="是否过期">
		<template slot-scope="scope">
			<el-link v-show= "scope.row.warning===0" type="success">●未过期</el-link>
			<el-link v-show= "scope.row.warning===1" type="warning">●即将过期</el-link>
			<el-link v-show= "scope.row.warning===2" type="danger">●已过期</el-link>
		</template>

	  </el-table-column>
    </el-table>
	</div>
	</div>
</template>

<script>
// 按需导入 API 接口
import { getLiShiAPI } from '@/api/lishiAPI'
export default {
  data () {
    return {
	  input: '',
	  value: '',
      tableData: null
    }
  },
  methods: {
    async initGetLiShiInfo () {
		  // 1. 调用 API 接口
		  const {
		    data: res
		  } = await getLiShiAPI()
		  // console.log(res)
		  // 2. 判断请求是否成功
		  if (res.message === 'OK') {
		    // 3. 为用户的频道列表赋值
		    // console.log(res.data.info_list)
		    const x = res.data.list
			this.tableData = x
			localStorage.removeItem('tableData')
			localStorage.setItem('tableData', JSON.stringify(this.tableData))
		  }
    },
    searchclick () {
	  // 搜索功能
	  this.tableData = JSON.parse(localStorage.getItem('tableData'))
      console.log(this.input)
	  var searchName = this.input.trim()
	  if(searchName){
		  this.tableData = this.tableData.filter(function (item) {
		  		  var str = item.foodname
		  		  return str.indexOf(searchName) !== -1
		  })
	  }
	  // if (this.input === '') {
		 //  this.tableData = JSON.parse(localStorage.getItem('tableData'))
	  // }
    },
    orderfoods () {
	  var defalutData = JSON.parse(localStorage.getItem('tableData'))
      if (this.value === '入柜时间') {
		  this.tableData.sort(function (a, b) {
			  var a1 = new Date(a.Addtime)
			  var a2 = new Date(b.Addtime)
			  return a1 - a2
		  })
		  console.log(this.tableData)
	  } else if (this.value === '默认排序') {
		  this.tableData = defalutData
	  } else if (this.value === '食材新鲜度') {
		  this.tableData.sort(function (a, b) {
			  return a.warning - b.warning
		  })
	  } else if (this.value === '单价') {
		  this.tableData.sort(function (a, b) {
			  var a1 = parseInt(a.Price)
			  var a2 = parseInt(b.Price)
		  	  return a1 - a2
		  })
	  }
    }
  },
  created () {
    this.initGetLiShiInfo()
  },
  mounted () {
  }

}
</script>

<style scoped>
	/* 全局导入公共样式 */
	@import url("../assets/css/common.css");
	.container {
	    width: 10rem;
	    height: 5.625rem;
	    margin: 0 auto;
	    /* background: #100c2a; */
		background: url(../assets/images/goods_bg1.png);
		background-size: 100% 100%;
	    border: 1px solid #797979;
	}
	.container .main {
	    width: 9.26875rem;
	    height: 3.83125rem;
	    opacity: 0.5;
	    background: #fff;
	    border: 1px solid #797979;
	    border-radius: 0.20625rem;
	    margin-left: 0.31875rem;
	    margin-top: 0.125rem;
		overflow: auto;
	}
	.el-table {
		font-size: 0.15rem;
		color: #333333;
	}
/* 	.el-table tr{
		height: 0.4875rem !important;
	} */
	.container .header{
		position: relative;
		box-sizing: border-box;
		width: 10rem;
		height: 0.7rem;
		font-size: 0.45rem;
		/* padding-top: 0.1rem; */
		text-align: center;
		color: #140707;
		font-weight: 700;
		opacity: 0.57;
	}
	.header .search{
		position: absolute;
		left: 0.33125rem;
		top: -0.09375rem;
		width: 2.375rem;
		height: 40px;
		opacity: 1;
		/* background-color: #000000 */
	}
	.header .search .left{
		box-sizing: border-box;
		width: 1.625rem;
		height: 100%;
		float: left;
	}
	.header .search .right{
		box-sizing: border-box;
		width: 0.5625rem;
		height: 100%;
		float: left;
	}
	.header .orderby{
		position: absolute;
		top: -0.0625rem;
		right: 0.4rem;
		width: 1.15rem;
		height: 0.25rem;
		color: #565656;
		opacity: 1;
	}
	.el-link{
		font-size: 0.15rem;
		text-decoration: none;
		text-shadow: red;
	}
</style>
